<template>
  <div class="home">
    <div class="download-box">
      <img src="../assets/2.jpg" alt="">
      <h3>下载文件名称</h3>
      <span class="download-but-box">
        <button @click="openChildWindow">本地下载</button>
        <button @click="openChildWindow">本地下载</button>
      </span>
      <button class="now-but" @click="openChildWindow">立即下载</button>
    </div>
  </div>
</template>
<script setup lang="ts">
const openChildWindow = () => {
  window.myApi.openChildWindow()
}
</script>
<style scoped>
.home {
  width: 100%;
  display: flex;
  align-items:flex-start;
}

.download-box {
  padding: 10px 10px 20px 10px;
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(238,248,219);
  margin-left: 50px;
  margin-top: 50px;
  border-radius: 6px;
}

.download-box img {
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}
h3{
  width: 100%;
  text-align: left;
  padding-left: 20px;
  font-weight: bold;
  color: black;
  margin-top: 10px;
  letter-spacing: 2px;
}
.download-but-box{
  display: flex;
  justify-content: space-around;
  width: 290px;
  margin-top: 20px;
}
.download-but-box button{
  width: 100px;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  color: rgb(7,122,82);
  background-color: rgb(186,240,125);
  border-radius: 5px;
  
}
.now-but{
  width: 245px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: rgb(255,141,26);
  border-radius: 5px;
  margin-top: 20px;
}
button{
  border: none;
  cursor: pointer;
}
</style>
